<template>
  <div class="person">
    <h2>
      姓名:{{name2}}
      年龄:{{car.age }}
    </h2>
    <button @click="changeName">修改名字</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { reactive, toRefs,toRef} from 'vue'

// 数据
let car = reactive({ name: '奔驰', age: 100 })
console.log(car);

console.log(toRefs(car));

let {name,age} = toRefs(car);  //编程ref的响应式数据
let name2 = toRef(car,'name')

function changeName() {
  age.value += 10;
  name2.value +='----'
}
</script>